<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入验证</title>
</head>
<body>
  <div>
    <label for="importValue">Number：</label>
    <input type="text" id="importValue" name="importValue" value="" placeholder="请输入">
    <button>清除</button>
  </div>
  <p>
    input输入值：<span class="receiveValue"></span>
  </p>
  <p>
    input验证结果：<span class="verifyValue"></span>
  </p>
</body>
<script>
  const importValue = document.querySelector("input");
  const receiveValue = document.getElementsByClassName("receiveValue")[0];
  const verifyValue = document.getElementsByClassName("verifyValue")[0];
  const btn = document.querySelector("button");

  // 监听input，并绑定操作事件
  importValue.addEventListener("input", updataValue);

  // 监听事件
  function updataValue (e) {
    // 将input输入内容赋值给接收的span，并展示
    receiveValue.textContent = e.target.value;

    // 校验开始
    let substitute = e.target.value
    if(substitute.length == 1 && substitute == '.'){ //首位不能为小数点
      substitute = '';
    }
    // 清除“数字”和“.”以外的字符
    substitute = substitute.replace(/[^\d.]/g, "")
    // 只保留第一个. 清除多余的
    substitute = substitute.replace(/\.{2,}/g, ".")
    substitute = substitute.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
    // 只能输入一位小数
    substitute = substitute.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3')
    if(substitute.indexOf(".") < 0 && substitute != ""){ // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
      substitute = parseFloat(substitute)
      substitute = substitute.toString()  // parseFloat会将数据转为number类型，indexOf只能用于判断string类型，所以进行类型转换
    }
    // 监听与vue的watch不一样？？？
    verifyValue.textContent = substitute
  }

  // 绑定input失焦事件
  importValue.onblur = inputOnblue;
  // 失焦触发校验
  function inputOnblue () {
    // 失焦后input赋值
    // importValue.value = 'Focus has been lost';
    // 更新接收的span，并展示
    receiveValue.textContent = 'Focus has been lost';
  }

  //输入input清除事件
  btn.onclick = () => {
    importValue.value = ''
  }

</script>
</html>